<template autoRoute="true">
  <div class="lifecycleManagement">
    <section class="top">
      <div class="title">生命周期管理</div>
      <div style="display: flex; gap: 12px"></div>
    </section>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="项目" name="project">
        <!--      <lifecycle type="PROJECT" />-->
      </el-tab-pane>
      <el-tab-pane label="任务" name="task">
        <!--      <lifecycle type="TASK" />-->
      </el-tab-pane>
      <el-tab-pane label="状态类型" name="lifecycleStatus">
        <!--      <lifecycleStatus />-->
      </el-tab-pane>
    </el-tabs>
    <div>
      <lifecycle v-if="activeName === 'project'" type="PROJECT" />
      <lifecycle v-if="activeName === 'task'" type="TASK" />
      <lifecycleStatus v-if="activeName === 'lifecycleStatus'" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import lifecycle from "@/views/pm/globalSetting/globalLifecycle/lifecycle/index.vue";
  import lifecycleStatus from "@/views/pm/globalSetting/globalLifecycle/lifecycle/workStatus.vue";

  const activeName = ref("project");
  const handleClick = () => {};
</script>

<style scoped lang="scss">
  .lifecycleManagement {
    padding: 16px 16px 0 16px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
      }
    }
  }

  :deep(.el-tabs__header) {
    padding: 0;
    margin: 0;
  }
</style>
